{{define "auth/signup.html"}}
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>教师管理 | Registration Page</title>
    <!-- Tell the browser to be responsive to screen width -->
{{template "auth/auth_start.html" .}}
<body class="hold-transition register-page">
<div class="register-box full-page">
    <div class="register-logo">
        <a href="/"><b>T</b>eacherManager</a>
    </div>

    <div class="register-box-body">
    {{if not .message}}
        <p id="msg" class="login-box-msg">Register a new membership</p>
    {{else}}
        <p id="msg" class="login-box-msg text-danger">{{.message}}</p>
    {{end}}
        <form id="signupForm" action="" method="post" onsubmit="return checkPassword();">
            <!--<div class="form-group has-feedback">
                <input type="text" class="form-control" placeholder="Full name">
                <span class="glyphicon glyphicon-user form-control-feedback"></span>
            </div>-->

            <div class="form-group has-feedback">
                <input type="email" name="email" class="form-control" placeholder="Email">
                <span class="glyphicon glyphicon-envelope form-control-feedback"></span>
            </div>
            <div class="form-group has-feedback">
                <input type="password" name="password" class="form-control" placeholder="Password" id="form-password">
                <span class="glyphicon glyphicon-lock form-control-feedback"></span>
            </div>
            <div class="form-group has-feedback">
                <input type="password" class="form-control" placeholder="Retype password" id="form-password-again">
                <span class="glyphicon glyphicon-log-in form-control-feedback"></span>
            </div>
            <div class="row">
                <div class="col-xs-8">
                    <div class="checkbox icheck">
                        <label>
                            <input class="myicheck" type="checkbox"> I agree to the <a href="#">terms</a>
                        </label>
                    </div>
                </div>
                <!-- /.col -->
                <div class="col-xs-4">
                    <button type="button" class="login btn btn-primary btn-block btn-flat disabled">Register</button>
                </div>
                <!-- /.col -->
            </div>
        </form>

        <!-- <div class="social-auth-links text-center">
             <p>- OR -</p>
             <a href="#" class="btn btn-block btn-social btn-facebook btn-flat"><i class="fa fa-facebook"></i> Sign up using
                 Facebook</a>
             <a href="#" class="btn btn-block btn-social btn-google btn-flat"><i class="fa fa-google-plus"></i> Sign up using
                 Google+</a>
         </div>-->

        <a href="/signin" class="text-center">I already have a membership</a>

    </div>
    <div class="full-page-background" style="background-image: url(/static/images/register.jpeg) "></div>
    <!-- /.form-box -->
</div>
<!-- /.register-box -->

<!-- jQuery 3 -->
<script src="/static/libs/jquery/jquery.min.js"></script>
<!-- Jquery Form-->
<script src="http://malsup.github.com/jquery.form.js"></script>
<!-- Bootstrap 3.3.7 -->
<script src="/static/libs/bootstrap/js/bootstrap.min.js"></script>
<!-- iCheck -->
<script src="/static/libs/iCheck/icheck.min.js"></script>
<script src="/static/libs/sweetalert/sweetalert.min.js" ></script>

<script>

    // $(function () {
    //     // console.log($(".myicheck"));
    //
    // });

    $(function () {
        $('input').iCheck({
            checkboxClass: 'icheckbox_square-blue',
            radioClass: 'iradio_square-blue',
            increaseArea: '20%' // optional
        }).on('ifChanged', function (event) {
            $(".login").toggleClass("disabled")
        });

        // $('input').on('ifChecked', function(event){
        //     alert(event.type + ' callback');
        // });
        $(".login").click(function () {
            if ($(".login").hasClass("disabled")) {
                return
            }
            if (checkPassword()) {
                $('#signupForm').submit();
            }

        })
    });

    function checkPassword() {
        if ($("#form-password").val() == $("#form-password-again").val()) {
            return true;
        } else {
            $("#msg").text("两次密码输入不一致");
            $("#msg").addClass("text-danger");
            return false;
        }
    }


    $(document).ready(function () {

        $('#signupForm').ajaxForm(function (data) {
            if (data.succeed) {
                swal({
                    title: "注册成功",
                    text: "跳转到登录页",
                    type: "success",
                    timer: 2000,
                    showConfirmButton: false
                });
                setTimeout(function () {
                    window.location.href = "/signin"
                }, 2000);

            } else {
                $("#msg").text(data.message);
                $("#msg").addClass("text-danger");
            }
        });
    });
</script>
</body>
</html>
{{end}}